<!-- 根据UI的按钮要求及类型，重新封装 -->
<template>
  <el-button :class="[uiType,btnType]" v-bind="$attrs" v-on="$listeners" :icon="icon">
    <slot>按钮</slot>
  </el-button>
</template>

<script>
export default {
  name: 'YlButton',
  props: {
    uiType: { // table, search
      type: String,
      default: ''
    },
    // warning / danger / success
    btnType: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    }
  }
}

</script>
<style lang='scss' scoped>
@mixin background($color1,$color2,$color3,$color4) {
  background: $color1;
  &:hover{
    background: $color2;
  }
  &:active{
    background: $color3;
  }
  &[disabled]{
    background: $color4;
  }
}
@mixin fontColor($color1,$color2,$color3,$color4) {
  color: $color1;
  &:hover{
    color: $color2;
  }
  &:active{
    color: $color3;
  }
  &[disabled]{
    color: $color4;
  }
}
.default {
  height:33px;
  border-radius:6px;
  color: #ffffff;
  font-weight: normal;
  padding: 0 15px !important;
  border: 0;
  @include background(#4ea8e2, #1A90E5, #1880CC, #8FD0FF);
  &.warning{
    @include background(#FFA722, #ffbb54, #de911d, #FFD391);
  }
  &.danger{
    @include background(#f83d84, #ff3d87, #ef3b7f, #FAB0B7);
  }
  &.success{
    @include background(#32a3bd, #36b6d4, #2f99b1, #A8E1B0);
  }
  &.info {
    @include background(#909399, #a6a9ad, #909399, #f4f4f5);
  }
}

.plain {
  height:33px;
  border-radius:6px;
  color: #ffffff;
  font-weight: normal;
  padding: 0 15px !important;
  border: 0;
  @include fontColor(#1A90E5, #ffffff, #ffffff, #ffffff);
  @include background(#dbe7ee, #1A90E5, #1880CC, #8FD0FF);
  &.warning{
    @include fontColor(#FFA722, #ffffff, #ffffff, #ffffff);
    @include background(#fdecd4, #ffbb54, #de911d, #FFD391);
  }
  &.danger{
    @include fontColor(#f85b93, #ffffff, #ffffff, #ffffff);
    @include background(#efe6e8, #ff3d87, #ef3b7f, #FAB0B7);
  }
  &.success{
    @include fontColor(#32a3bd, #ffffff, #ffffff, #ffffff);
    @include background(#d5edf3, #32a3bd, #2f99b1, #A8E1B0);
  }
}

.common{
  height:23px;
  border-radius:6px;
  color: #ffffff;
  font-weight: normal;
  padding: 0 8px !important;
  border: 0;
  @include background(#4ea8e2, #1A90E5, #1880CC, #8FD0FF);
  &.warning{
    @include background(#FFA722, #ffbb54, #de911d, #FFD391);
  }
  &.danger{
    @include background(#f83d84, #ff3d87, #ef3b7f, #FAB0B7);
  }
  &.success{
    @include background(#32a3bd, #36b6d4, #2f99b1, #A8E1B0);
  }
}

.main{
  height:23px;
  border-radius:6px;
  color: #ffffff;
  font-weight: normal;
  padding: 0 8px !important;
  border: 0;
  @include fontColor(#1A90E5, #ffffff, #ffffff, #ffffff);
  @include background(#dbe7ee, #1A90E5, #1880CC, #8FD0FF);
  &.warning{
    @include fontColor(#FFA722, #ffffff, #ffffff, #ffffff);
    @include background(#fdecd4, #ffbb54, #de911d, #FFD391);
  }
  &.danger{
    @include fontColor(#f85b93, #ffffff, #ffffff, #ffffff);
    @include background(#efe6e8, #ff3d87, #ef3b7f, #FAB0B7);
  }
  &.success{
    @include fontColor(#32a3bd, #ffffff, #ffffff, #ffffff);
    @include background(#d5edf3, #32a3bd, #2f99b1, #A8E1B0);
  }
  &.info {
    @include fontColor(#5f6064, #ffffff, #ffffff, #ffffff);
    @include background(#ebecee, #a6a9ad, #909399, #f4f4f5);
  }
}
</style>
